// Fetch API : 只能在浏览器环境中使用，不能在 Node.js 环境下使用
// https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
// fetch:
// https://developer.mozilla.org/zh-CN/docs/Web/API/fetch
// Request
// https://developer.mozilla.org/zh-CN/docs/Web/API/Request
// Response
// https://developer.mozilla.org/zh-CN/docs/Web/API/Response
// Headers
// https://developer.mozilla.org/zh-CN/docs/Web/API/Headers


( ()=>{

    const btn = document.querySelector('#fetch');
    const result = document.querySelector('#result');

    btn.addEventListener( 'click' , {
        handleEvent(e){
            console.log(1);

            let headers = new Headers();
            headers.set( 'content-type' , 'application/x-www-form-urlencoded' );

            let input = '/hello' ;
            let init = {
                method: 'POST' ,
                headers: headers ,
                body: `username=zhangsanfeng&password=hello`
            }
            let request = new Request( input , init );
            console.log( request );

            // 调用 fetch 函数向服务端发送异步请求并期望返回 Promise 实例
            let p = fetch( request , { method: 'POST'} );

            p.then( response => {
                console.log( response );
                // 调用 Response.prototype.json() 返回一个包含了响应数据的 Promise 实例
                return response.json();
            }).then( data => {
                console.log( data );
                result.innerHTML = JSON.stringify( data );
            }).catch( error => {
                console.log( error );
                result.innerHTML = '请求失败' ;
            });

            console.log(2);
        }
    } , false );

} )();